(function(fn, w, name) {
    w[name] = fn(w);
    
})(function(w) {
    var options = {
        speed: 4000,
    };
    function banner(str, option)
    {
        this.option = Object.assign({}, options, option);
        // 
        this.wrap = document.querySelector(str);
        this.oBannerWrap = this.wrap.querySelector('.banner-imgs');
        this.oList = this.wrap.querySelectorAll('.banner-item');
        this.dot = this.wrap.querySelector('.banner-mark');
        
        this.width = this.wrap.offsetWidth; // 当前banner容器的宽度
        
        this.index = 0; // 要启用哪个
        this.timer = null;
        this.type = 'left';
        this.scale = 1;
        
        this.init();
        
        // 填充点
        this.fillDot();
        this.dotList = this.dot.querySelectorAll('span');
        
        this.active(this.index);
        
        this.auto();
        
        this.bindEvent();
    }
    
    banner.prototype.bindEvent = function()
    {
        
    }
    
    banner.prototype.init = function()
    {
        var eles = this.oList;
        for(var i=0; i<eles.length; i++) {
            eles[i].style.width = this.width + 'px';
            eles[i].style.position = 'absolute';
            eles[i].style.left = this.width*i + 'px';
            
        }
    }
    
    banner.prototype.auto = function()
    {
        var that = this;
        clearInterval(this.timer);
        this.timer = setInterval(function() {
            'left' === that.type && that.leftMove();
            'right' === that.type && that.rightMove();
            
            
        }, this.option.speed);
    }
    
    banner.prototype.rightMove = function()
    {
        var that = this;
        startMove({
            ele: this.oList[this.index],
            target: {
                left: this.width * (this.index + 1)
            },
            iTime: 400,
            sType: 'easeIn',
            fnEnd: function() {
                this.style.left = -that.width + 'px'
            }
        });
        this.index++;
        this.index > this.oList.length - 1 && (this.index = 0);
        this.active(this.index);
        startMove({
            ele: this.oList[this.index],
            target: {
                left: 0
            },
            iTime: 800,
            sType: 'backOut'
        });
    }
    
    banner.prototype.leftMove = function()
    {
        var that = this;
        startMove({
            ele: this.oList[this.index],
            target: {
                left: -this.width * (this.index + 1)
            },
            iTime: 400,
            sType: 'easeIn',
            fnEnd: function() {
                this.style['left'] = that.width + 'px';
            }
        });
        this.index--;
        0 > this.index && (this.index = this.oList.length - 1);
        this.active(this.index);
        startMove({
            ele: this.oList[this.index],
            target: {
                left: 0
            },
            iTime: 800,
            sType: 'backOut'
        });
    }
    
    // 填充点
    banner.prototype.fillDot = function()
    {
        var str = '';
        for(var i=0; i<this.oList.length; i++) {
            str += '<span></span>';
        }
        
        this.dot.innerHTML = str;
    };
    
    banner.prototype.active = function()
    {
        var eles = this.dotList;
        for(var i=0; i<eles.length; i++) {
            eles[i].classList.remove('active')
        }
        
        eles[this.index].classList.add('active');
    };
    
    return banner;
}, window, 'banner')